<template>
    <div class="page-banner-add">
        <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules">
            <el-form-item label="图片链接" prop="link">
                <el-input v-model="formData.link" />
            </el-form-item>
            <el-form-item label="图片提示" prop="alt">
                <el-input v-model="formData.alt" />
            </el-form-item>
            <el-form-item label="选择图片">
                <el-upload class="avatar-uploader" :show-file-list="false" :http-request="onChange">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="图片Base64 img" prop="img">
                <el-input v-model="formData.img" disabled />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :loading="isloading" @click="onClick">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import { addBanner } from '@/api/banner.js';


export default {
    name: "banner-add",
    data() {
        return {
            formData: {
                //需要的是Base64的编码
                img: '',
                alt: '',
                link: '',

            },
            //表单校验
            formRules: {
                img: [{ required: true, message: "必须" }],
                alt: [{ required: true, message: "必须" }],
                link: [{ required: true, message: "必须" }],
            },
            //选择图片的预览
            imageUrl: "",
            isloading: false,

        };
    },
    methods: {
        //选择文件后,覆盖默认的xhr行为。
        onChange(options) {
            //console.log("===", options)
            const file = options.file
            //校验文件格式
            const typeRighr = ['imge/png', 'image/jpg', 'image/jpeg'].includes(file.type);
            //校验文件大小
            const sizeRight = file.size / 1024 / 1024 < 2
            if (!typeRighr || !sizeRight) {
                ElMessage.error("校验不通过，请检查文件类型和大小")
                return false
            }
            //this.imageUrl = window.URL.createObjectURL(file);

            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = () => {
                this.formData.img = fileReader.result
                this.imageUrl = fileReader.result
            }

            return false;
        },

        async onClick() {
            console.log("===========")
            try {
                await this.$refs.formRef.validate();
                this.isloading = true;
                addBanner(this.formData).then(() => {
                    //TODO
                    this.formData.img = '';
                    this.formData.alt = '';
                    this.formData.link = '';
                    this.imageUrl = '';
                    this.$router.push('/banner/list')
                    console.log("=====123======")
                }).finally(() => {
                    this.isloading = false
                    console.log("=====1======")
                })
            } catch (error) { }
        }
    },
};

</script>




<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>